<template>
	<view class="content">
		<view class="loader">
		</view>
		<view class="logoimg">
			<image class="logo" src="/static/logo.jpg" style="background: #FFFFFF;"></image>
		</view>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<input type="text" placeholder="请输入您的管理员账号" clearable focus class="inputAcc" v-model="phone" />
		<input type="password" displayable placeholder="请输入登录密码" class="input" v-model="password" />
		<button class="loginBtn" @tap="bindLogin" hover-class="hover-class-bg">登录</button>
		<image src="/static/bg.png" mode="" style="position: absolute; left: 0; bottom: 0; z-index: -1; width: 464upx; height: 590upx;"></image>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				title: '中国邮政',
				openid:null,
				phone: '',
				password: ''
			}
		},
		methods: {
			bindLogin() {
				if (!this.phone) {
					this.$modal.msg('请输入您的管理员账号');
					return;
				}
				if (!this.password) {
					this.$modal.msg('请输入登录密码');
					return;
				}
				// this.$modal.loading('正在登录中...');
				console.log('--------------')
				uni.reLaunch({
					url:'/pages/index/index'
				})
				this.$tab.navigateTo('/pages/index/index')
				this.$http.post('/api/sorter/checkPwd/appLogin', {}).then(res => {
					this.$modal.closeLoading()
					if (res.success == true) {
						this.$modal.msgSuccess(res.msg);
					} else {
						this.$modal.msg(res.msg);
					}
				}).catch(error => {
					this.$modal.msgError(error);
					console.error('Error:', error);
				});
			},
		},
		onReady() {
			
		},
		onShow(){
			
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	page {
		min-height: 100%;
		display: flex;
		font-size: 16px;
	}
	page {
		width: 100%;
		height: 100%;
		display: block;
	}
	
	page {
		background-color: #fff;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.input {
		font-size: 28upx;
		margin: 20% 0rem;
		position: absolute;
		top: 600rpx;
		height: 70upx;
		width: 50%;
		text-align: center;
		// border-bottom: 1px #007AFF solid;
		border-bottom: 1px #14141A solid;
		border-radius: 10upx;

	}

	.inputAcc {
		font-size: 28upx;
		margin: 20% 0rem;
		position: absolute;
		top: 470rpx;
		height: 70upx;
		width: 50%;
		text-align: center;
		// border-bottom: 1px #007AFF solid;
		border-bottom: 1px #14141A solid;
		border-radius: 10upx;

	}

	.loginBtn {
		font-size: 34upx;
		background: #14141A !important;
		// background: linear-gradient(to right, #4bb0ff, #6149f6);
		border-radius: 200rpx;
		width: 200rpx;
		position: absolute;
		color: white;
		bottom: 150rpx;
	}
	
	.loginBtn:active {
	  // transform: translateY(4upx);
	}

	.logoimg {
		position: absolute;
		top: 155rpx;
		z-index: 10;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		border-radius: 100upx;
	}

	.text-area {
		position: absolute;
		top: 400rpx;
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 50rpx;
		color: #14141A;
	}

	.loader {
		z-index: 1;
		position: absolute;
		top: 130rpx;
		width: 250rpx;
		height: 250rpx;
		border-radius: 50%;
		background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
		animation: animate 1.2s linear infinite;
	}

	@keyframes animate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loader:after {
		content: '';
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		background: #f1f1f1;
		border: solid white 10px;
		border-radius: 50%;
	}
</style>